<!DOCTYPE html>
<html>
<head>
	<% include link %>
</head>
<body>
	<% include head %>
	<!-- <nav id="img" class="navbar" style="margin-bottom: 50px ;">
		<div class="col-sm-4 col-sm-offset-3">
			<div class="form-group">
				<label for="exampleInputFile">选择封面</label>
				<input type="file" accept="image/*" id="imgFile" name='imgFile'>
				<p class="help-block">从你的系统选择文件</p>
			</div>
			<div class="progress">
				<div id="jin" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition: 1s ;">
					<span class="sr-only">20% Complete (danger)</span>
				</div>
			</div>
		</div>
		<div class="col-sm-2" style="">
			<div>
				<a href="#" class="thumbnail" style="margin-bottom: 0px;width: 100%;height: auto ;">
					<img id="showUpHead" src="../img/defaultHead.png" alt="...">
				</a>
			</div>
		</div>
	</nav> -->
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<nav id="mp4" class="navbar">
		<div class="col-sm-4 col-sm-offset-3">
				<div class="form-group">
					<label for="exampleInputFile">选择你的视频文件 <span style=" color: rgb(224, 89, 208);">mp4</span></label>
					<input type="file" accept=".mp4" id="mp4File" name='mp4File'>
					<p class="help-block">从你的系统选择文件</p>
				</div>
				<div class="progress">
					<div id="jin2" class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%;transition: 1s ;">
						<span class="sr-only">20% Complete (danger)</span>
					</div>
				</div>
		</div>
	</nav>
	<nav id="form" class="navbar" style="margin-bottom: 50px;display: none;">
		<div class="col-sm-4 col-sm-offset-3">
			<form>
				<div class="form-group">
					<label for="exampleInputPassword1">video name</label>
					<input type="text" class="form-control" id="vName" name="vName" placeholder="input video name">
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">video info</label>
					<input type="text" class="form-control" id="vInfo" name="vInfo" placeholder="input video info">
				</div>
			</form>
		</div>
	</nav>
	<nav class="navbar" style="margin-bottom: 50px ;">
		<div class="col-sm-4 col-sm-offset-3">
			<button id="submit" type="submit" class="button button-glow button-rounded button-raised button-primary" style="display: block ;margin: 0px auto 20px auto;width: 100% ;">下一步</button>
		</div>
	</nav>
</body>
<script type="text/javascript">

	var img = $('#img'),
		mp4 = $('#mp4'),
		form = $('#form'),
		status = 1,
		imgPath = '',
		videoPath = '';

	function submit(fileType){
		var fileObj = document.getElementById(fileType).files[0];
		var forms = new FormData()
		forms.append("file", fileObj)
		var xhr = new XMLHttpRequest()
		xhr.open("post", '/ces', true);
		
		if (fileType == 'imgFile') {
			jin('#jin')
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){    
					var b = xhr.responseText;
					var st = JSON.parse(b)
					successBackImg(st.paths)
				}
			}
			xhr.onload = function (date) {
				// console.log(date)
				bar.css({'width':'100%'})
				mp4.css({'display':'block'})
				status++
				clearInterval(time)
				
			};
			xhr.send(forms)
		} else {
			jin('#jin2')
			xhr.onreadystatechange = function(){
				if(xhr.readyState == 4 && xhr.status == 200){    
					var b = xhr.responseText;
					var st = JSON.parse(b)
					videoPath = st.paths
				}
			}
			xhr.onload = function () {
				bar.css({'width':'100%'})
				form.css({'display':'block'})
				status++
				clearInterval(time)
			};
			xhr.send(forms)
		}
	}

	function formAjax(vName, vInfo){
		status++
		$.ajax({
			url:'/ajaxInfo/?imgPath='+
				imgPath+'&videoPath='+videoPath+'&vName='+
				vName+'&vInfo='+vInfo,
			type:'get',
			success: function(date){
				console.log(date)
			}
		})
	}

	$('button').click(function(){
		if (status==1) {
			submit('imgFile')
		} else if(status==2) {
			form.css({'display':'block'})
			submit('mp4File')
		} else if (status==3) {
			var vName = $('#vName').val(),
				vInfo = $('#vInfo').val();
			formAjax(vName, vInfo)
		}
	})

	function jin(barId){
		bar = $(barId)
		time = setInterval(function(){
			$.get("/ajax",function(result){
				if (result.jin == 100) {
					return;
				} else {
					bar.css({'width':result.jin+'%'})
				}
			})
		},1000)
	}
	function successBackImg(imgUrl){
		imgPath = imgUrl
		$('#showUpHead').attr({'src':'../upfiles/'+imgUrl})
	}
</script>
</html>